
<title>基础设置</title>

<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>系统设置</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-header">系统设置</div>
    <div class="layui-card-body" style="padding: 15px;">
      <form class="layui-form" action="" lay-filter="component-form-group">
        <script type="text/html" template lay-url="{{ layui.setter.baseUrl }}sysset/basic"
        lay-done="layui.form.render(null, 'component-form-group');">
          <div class="layui-form-item">
            <label class="layui-form-label">平台名称</label>
            <div class="layui-input-block">
              <input type="text" id="platform_name" name="data[platform_name]" value="{{ d.data.platform_name }}" lay-verify="required" autocomplete="on" placeholder="请输入平台名称" class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">平台Logo</label>
            <div class="layui-input-block">
              <div class="layui-upload">
                <button
                  type="button"
                  class="layui-btn"
                  id="logo-upload"
                  data-uploadtype="{{ d.data.uploadtype }}"
                  data-uploadurl="{{ d.data.mediauploadurl }}"
                  data-cdnurl="{{ d.data.cdnurl }}"
                >上传图片</button>
                <div class="layui-upload-list">
                  <img class="layui-upload-img" id="logo-upload-img" width="92" src="{{ d.data.logo }}">
                  <p id="test-upload-demoText"></p>
                </div>
              </div>
              <input type="hidden" id="data-logo" name="data[logo]" value="{{ d.data.logo }}">
              <div class="layui-form-mid layui-word-aux">请上传100x100像素，png格式(透明背景)的图片</div>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">TOKEN</label>
            <div class="layui-input-block">
              <input type="text" id="apitoken" name="data[apitoken]" value="123456789" autocomplete="on" placeholder="请输入授权TOKEN" class="layui-input" disabled>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">抖音Client_Key</label>
            <div class="layui-input-block">
              <input type="text" id="client_key" name="data[client_key]" value="{{ d.data.client_key }}" autocomplete="on" placeholder="{{ d.data.client_key?'已设置，留空则不修改':'请输入抖音Client Key' }}" class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">抖音Client_Secret</label>
            <div class="layui-input-block">
              <input type="text" id="client_secret" name="data[client_secret]" value="{{ d.data.client_secret }}" autocomplete="on" placeholder="{{ d.data.client_secret?'已设置，留空则不修改':'请输入抖音Client Secret' }}" class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">阿里云AccessKeyId2</label>
            <div class="layui-input-block">
              <input type="text" id="ali_keyid" name="data[ali_keyid]" value="" placeholder="请输入阿里云AccessKeyId" class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">阿里云AccessKeySecret2</label>
            <div class="layui-input-block">
              <input type="text" id="ali_keysecret" name="data[ali_keysecret]" value="" placeholder="请输入阿里云AccessKeySecret" class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">阿里云OSS BucketName</label>
            <div class="layui-input-block">
              <input type="text" id="ali_bucketname" name="data[ali_bucketname]" value="{{ d.data.ali_bucketname }}" lay-verify="required" autocomplete="on" placeholder="请输入阿里云OSS BucketName" class="layui-input">
            </div>
          </div>

          <div class="layui-form-item">
            <div class="layui-input-block">
              <div class="layui-footer">
                <input type="hidden" id="token" name="data[token]" value="{{ d.data.token }}">
                <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1" name="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
              </div>
            </div>
          </div>
        </script>
      </form>
    </div>
  </div>
</div>

<script>
layui.use(['admin', 'form', 'upload'], function(){
    var $ = layui.$
    ,admin = layui.admin
    ,element = layui.element
    ,layer = layui.layer
    ,laydate = layui.laydate
    ,form = layui.form
    ,upload = layui.upload;
    layui.poster = [];
    var siv = setInterval(function(){
        if($('#logo-upload').length > 0){
            var uploadtype = $('#logo-upload').data('uploadtype');
            switch (uploadtype) {
              case 'qiniu':
                var upload_data = {
                        'token': function(){
                          var upload_token = '';
                          $.ajax({
                              type: "GET",
                              url: layui.setter.baseUrl+'upload.qiniu_upload_token',
                              async:false,  //同步方式
                              success: function(ret){
                                  upload_token = ret.data;
                              }
                          });
                          return upload_token;
                        }
                      };
                break;

              default:
                var upload_data = {};
                break;
            }
            //普通图片上传
            var uploadInst = upload.render({
              elem: '#logo-upload'
              ,url: $('#logo-upload').data('uploadurl')
              ,data: upload_data
              ,before: function(obj){
                layer.load(); //上传loading
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                  $('#logo-upload-img').attr('src', result); //图片链接（base64）
                });
              }
              ,done: function(res){
                layer.closeAll('loading'); //关闭loading
                //如果上传失败
                if(res.code > 0){
                  if(res.msg != ''){
                    return layer.msg(res.msg);
                  }else{
                    return layer.msg('上传失败');
                  }
                }else{
                  //上传成功
                  switch (uploadtype) {
                    case 'qiniu':
                      var imgkey = res.key
                      break;
                    default:
                    var imgkey = res.data.key
                      break;
                  }
                  $('#data-logo').val($('#logo-upload').data('cdnurl')+'/'+imgkey);
                  return layer.msg('上传成功');
                }
              }
              ,error: function(){
                layer.closeAll('loading'); //关闭loading
                //演示失败状态，并实现重传
                var demoText = $('#test-upload-demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                  uploadInst.upload();
                });
              }
            });

            //海报背景图
            var uploadKefuPic = upload.render({
              elem: '#poster-images-upload'
              ,url: $('#poster-images-upload').data('uploadurl')
              ,multiple: true
              ,data: upload_data
              ,before: function(obj){
                layer.load(); //上传loading
              }
              ,done: function(res){
                layer.closeAll('loading'); //关闭loading
                //如果上传失败
                if(res.code > 0){
                  if(res.msg != ''){
                    return layer.msg(res.msg);
                  }else{
                    return layer.msg('上传失败');
                  }
                }else{
                    //上传成功
                    switch (uploadtype) {
                        case 'qiniu':
                        var imgkey = res.key
                        break;
                        default:
                        var imgkey = res.data.key
                        break;
                    }
                    if($('.drag[type=img]').length>0){
                        $('.drag[type=img] img').attr('src', $('#poster-images-upload').data('cdnurl')+'/'+imgkey);
                    }else{
                        var img = '<img src="'+$('#poster-images-upload').data('cdnurl')+'/'+imgkey+'" onload="document.getElementById(\'poster\').style.height=(this.height*320/this.width)+\'px\'" />';
                        var index = 0;
                        var obj = $('<div class="drag" type="img" index="' + index +'" style="z-index:' + index+'">' + img+'</div>');
                        $('#poster').append(obj);
                    }
                    return layer.msg('上传成功');
                }
              }
              ,error: function(){
                layer.closeAll('loading'); //关闭loading
                return layer.msg('上传失败');
              }
            });
            // poster start
            $.get(layui.setter.base+"lib/extend/designer.js?v="+((new Date(" 2018/06/22 08:00:20")).getTime()/1000), function(data){
                eval(data);
                for (let i = 0; i < layui.poster.length; i++) {
                    if(layui.poster[i].type == 'img'){
                        var img = '<img src="'+layui.poster[i].src+'" onload="document.getElementById(\'poster\').style.height=(this.height*320/this.width)+\'px\'" />';
                        var index = 0;
                        var obj = $('<div class="drag" type="img" index="' + index +'" style="z-index:' + index+'">' + img+'</div>');
                        $('#poster').append(obj);
                    }else{
                        $('.btn-com[data-type='+layui.poster[i].type+']').click();
                        $('.drag[type='+layui.poster[i].type+']').css(layui.poster[i]);
                    }
                }
            },"text");
            // poster end

            clearInterval(siv);
        }
    }, 200);

    /* 监听提交 */
    form.on('submit(component-form-demo1)', function(data){
        // layer.alert(JSON.stringify(data.field));
        var poster = [];
        $('.drag').each(function(){
            var obj = $(this);
            var type = obj.attr('type');
            var left = obj.css('left'),top = obj.css('top');
            var d= {left:left,top:top,type:obj.attr('type'),width:obj.css('width'),height:obj.css('height')};
            if(type=='nickname'){
                d.size = obj.attr('size');
                d.color = obj.attr('color');
            } else if(type=='qr'){
                d.size = obj.attr('size');
            } else if(type=='img'){
                d.src = obj.find('img').attr('src');
            }
            poster.push(d);
        });
        data.field['data[vipposter]'] = poster;
        $.post(
            layui.setter.baseUrl+'sysset/basic',
            data.field,
            function(ret){
                var {code,msg,data} = ret;
                if(code==0){
                    $('#token').val(data.token);
                    layer.alert('提交成功！');
                }else{
                    layer.alert(msg);
                }
            }
        );
        return false;
    });
});
</script>